<template>
  <div class="app-container home">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="page-title">
        <h1>实时追踪 XDOG 市场表现、社区数据和价格走势</h1>
        <p>获取最新的市场动态和社区活动，了解 XDOG 的最新价格和交易情况。</p>
      </div>
      <div class="admin-button">
        <el-button type="primary" @click="goToLogin">进入管理后台</el-button>
      </div>
    </div>

    <!-- 实时价格信息 -->
    <el-row :gutter="20" class="data-section">
      <el-col :span="24">
        <el-card class="data-card" v-loading="loading.price">
          <template #header>
            <div class="card-header">
              <div class="card-header-content">
                <el-icon><Coin /></el-icon>
                <span>实时价格信息</span>
              </div>
              <el-button link type="primary" @click="refreshData">
                <el-icon><Refresh /></el-icon>
                刷新数据
              </el-button>
            </div>
          </template>

          <div class="price-content">
            <el-row :gutter="24">
              <!-- 主要价格信息 -->
              <el-col :span="24" :md="16">
                <div class="price-main-info">
                  <div class="main-price-container">
                    <div class="price-item">
                      <div class="price-label">
                        <el-icon><PriceTag /></el-icon>
                        <span>XDOG 价值</span>
                      </div>
                      <div class="price-value">${{ priceInfo.currentPrice }}</div>
                      <div class="price-change" :class="{ 'positive': priceInfo.change24h >= 0 }">
                        <el-icon v-if="priceInfo.change24h >= 0"><Top /></el-icon>
                        <el-icon v-else><Bottom /></el-icon>
                        {{ priceInfo.change24h >= 0 ? '+' : '' }}{{ priceInfo.change24h }}%
                      </div>
                    </div>
                  </div>

                  <el-row :gutter="24" class="price-sub-info">
                    <el-col :span="12" :lg="6">
                      <div class="sub-info-item">
                        <div class="sub-info-label">
                          <el-icon><TrendCharts /></el-icon>
                          <span>24h 最高</span>
                        </div>
                        <div class="sub-info-value">${{ priceInfo.high24h }}</div>
                      </div>
                    </el-col>
                    <el-col :span="12" :lg="6">
                      <div class="sub-info-item">
                        <div class="sub-info-label">
                          <el-icon><DataAnalysis /></el-icon>
                          <span>24h 最低</span>
                        </div>
                        <div class="sub-info-value">${{ priceInfo.low24h }}</div>
                      </div>
                    </el-col>
                    <el-col :span="12" :lg="6">
                      <div class="sub-info-item">
                        <div class="sub-info-label">
                          <el-icon><Wallet /></el-icon>
                          <span>24h 交易额</span>
                        </div>
                        <div class="sub-info-value">${{ formatToTwoDecimals(priceInfo.volume24h) }}</div>
                      </div>
                    </el-col>
                    <el-col :span="12" :lg="6">
                      <div class="sub-info-item">
                        <div class="sub-info-label">
                          <el-icon><PieChart /></el-icon>
                          <span>当前市值</span>
                        </div>
                        <div class="sub-info-value">${{ formatToTwoDecimals(priceInfo.marketCap) }}</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>

              <!-- 价格变化趋势 -->
              <el-col :span="24" :md="8">
                <div class="price-change-trends">
                  <div class="trend-header">
                    <el-icon><DataLine /></el-icon>
                    <span>价格变化趋势</span>
                  </div>
                  <div class="trend-list">
                    <div class="trend-item">
                      <div class="trend-label">5分钟</div>
                      <div class="trend-value" :class="{ 'positive': priceInfo.change5M >= 0 }">
                        {{ priceInfo.change5M >= 0 ? '+' : '' }}{{ priceInfo.change5M }}%
                      </div>
                    </div>
                    <div class="trend-item">
                      <div class="trend-label">1小时</div>
                      <div class="trend-value" :class="{ 'positive': priceInfo.change1H >= 0 }">
                        {{ priceInfo.change1H >= 0 ? '+' : '' }}{{ priceInfo.change1H }}%
                      </div>
                    </div>
                    <div class="trend-item">
                      <div class="trend-label">4小时</div>
                      <div class="trend-value" :class="{ 'positive': priceInfo.change4H >= 0 }">
                        {{ priceInfo.change4H >= 0 ? '+' : '' }}{{ priceInfo.change4H }}%
                      </div>
                    </div>
                    <div class="trend-item">
                      <div class="trend-label">24小时</div>
                      <div class="trend-value" :class="{ 'positive': priceInfo.change24h >= 0 }">
                        {{ priceInfo.change24h >= 0 ? '+' : '' }}{{ priceInfo.change24h }}%
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>

            <!-- 交易量和地址信息 -->
            <el-row :gutter="24" class="mt-4">
              <el-col :span="24">
                <div class="trade-info">
                  <el-tabs type="border-card" class="custom-tabs">
                    <el-tab-pane label="交易量">
                      <el-row :gutter="16">
                        <el-col :span="6" :sm="12" :xs="12" style="padding: 8px;">
                          <div class="trade-item">
                            <div class="trade-label">
                              <el-icon><Timer /></el-icon>
                              <span>5分钟</span>
                            </div>
                            <div class="trade-value">${{ formatTokenAmount(priceInfo.volume5M) }}</div>
                            <div class="trade-count">{{ formatTokenAmount(priceInfo.txs5M) }} 笔</div>
                          </div>
                        </el-col>
                        <el-col :span="6" :sm="12" :xs="12" style="padding: 8px;">
                          <div class="trade-item">
                            <div class="trade-label">
                              <el-icon><Clock /></el-icon>
                              <span>1小时</span>
                            </div>
                            <div class="trade-value">${{ formatTokenAmount(priceInfo.volume1H) }}</div>
                            <div class="trade-count">{{ formatTokenAmount(priceInfo.txs1H) }} 笔</div>
                          </div>
                        </el-col>
                        <el-col :span="6" :sm="12" :xs="12" style="padding: 8px;">
                          <div class="trade-item">
                            <div class="trade-label">
                              <el-icon><Calendar /></el-icon>
                              <span>4小时</span>
                            </div>
                            <div class="trade-value">${{ formatTokenAmount(priceInfo.volume4H) }}</div>
                            <div class="trade-count">{{ formatTokenAmount(priceInfo.txs4H) }} 笔</div>
                          </div>
                        </el-col>
                        <el-col :span="6" :sm="12" :xs="12" style="padding: 8px;">
                          <div class="trade-item">
                            <div class="trade-label">
                              <el-icon><Document /></el-icon>
                              <span>24小时</span>
                            </div>
                            <div class="trade-value">${{ formatTokenAmount(priceInfo.volume24h) }}</div>
                            <div class="trade-count">{{ formatTokenAmount(priceInfo.txs24H) }} 笔</div>
                          </div>
                        </el-col>
                      </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="代币信息">
                      <el-row :gutter="16">
                        <el-col :span="6" :sm="12" :xs="12" style="padding: 8px;">
                          <div class="token-item">
                            <div class="token-label">
                              <el-icon><Coin /></el-icon>
                              <span>流通量</span>
                            </div>
                            <div class="token-value">{{ formatTokenAmount(priceInfo.circSupply) }}</div>
                            <div class="token-placeholder"></div>
                          </div>
                        </el-col>
                        <el-col :span="6" :sm="12" :xs="12" style="padding: 8px;">
                          <div class="token-item">
                            <div class="token-label">
                              <el-icon><Money /></el-icon>
                              <span>流动性</span>
                            </div>
                            <div class="token-value">${{ formatTokenAmount(priceInfo.liquidity) }}</div>
                            <div class="token-placeholder"></div>
                          </div>
                        </el-col>
                        <el-col :span="6" :sm="12" :xs="12" style="padding: 8px;">
                          <div class="token-item">
                            <div class="token-label">
                              <el-icon><User /></el-icon>
                              <span>持有地址</span>
                            </div>
                            <div class="token-value">{{ formatTokenAmount(priceInfo.holders) }}</div>
                            <div class="token-placeholder"></div>
                          </div>
                        </el-col>
                        <el-col :span="6" :sm="12" :xs="12" style="padding: 8px;">
                          <div class="token-item">
                            <div class="token-label">
                              <el-icon><TrendCharts /></el-icon>
                              <span>24h交易量</span>
                            </div>
                            <div class="token-value">{{ formatTokenAmount(priceInfo.tradeNum) }}</div>
                            <div class="token-placeholder"></div>
                          </div>
                        </el-col>
                      </el-row>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 核心指标展示 -->
    <el-row :gutter="24" class="data-section">
      <el-col :span="24" :xs="24" :sm="12" :md="6">
        <el-card class="data-card" v-loading="loading.stats">
          <div class="data-item">
            <el-icon class="data-icon"><ChatDotRound /></el-icon>
            <div class="data-label">推特讨论值</div>
            <div class="data-value">{{ stats.twitterMentions }}</div>
            <div class="data-change" :class="{ 'positive': stats.twitterMentionsChange >= 0 }">
              <el-icon v-if="stats.twitterMentionsChange >= 0"><Top /></el-icon>
              <el-icon v-else><Bottom /></el-icon>
              {{ stats.twitterMentionsChange >= 0 ? '+' : '' }}{{ stats.twitterMentionsChange }}%
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" :xs="24" :sm="12" :md="6">
        <el-card class="data-card" v-loading="loading.stats">
          <div class="data-item">
            <el-icon class="data-icon"><UserFilled /></el-icon>
            <div class="data-label">社区人数</div>
            <div class="data-value">{{ stats.telegramMembers }}</div>
            <div class="data-change" :class="{ 'positive': stats.telegramMembersChange >= 0 }">
              <el-icon v-if="stats.telegramMembersChange >= 0"><Top /></el-icon>
              <el-icon v-else><Bottom /></el-icon>
              {{ stats.telegramMembersChange >= 0 ? '+' : '' }}{{ stats.telegramMembersChange }}%
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" :xs="24" :sm="12" :md="6">
        <el-card class="data-card" v-loading="loading.stats">
          <div class="data-item">
            <el-icon class="data-icon"><Avatar /></el-icon>
            <div class="data-label">今日新增人数</div>
            <div class="data-value">{{ stats.todayNewMembers }}</div>
            <div class="data-change" :class="{ 'positive': stats.todayNewMembersChange >= 0 }">
              <el-icon v-if="stats.todayNewMembersChange >= 0"><Top /></el-icon>
              <el-icon v-else><Bottom /></el-icon>
              {{ stats.todayNewMembersChange >= 0 ? '+' : '' }}{{ stats.todayNewMembersChange }}%
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" :xs="24" :sm="12" :md="6">
        <el-card class="data-card" v-loading="loading.stats">
          <div class="data-item">
            <el-icon class="data-icon"><Coin /></el-icon>
            <div class="data-label">维稳基金余额</div>
            <div class="data-value">{{ stats.stabilityFundBalance }}</div>
            <div class="data-change">XDOG</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :span="24" :xs="24" :sm="24" :md="12">
        <el-card v-loading="loading.charts">
          <template #header>
            <div class="chart-header">
              <h3>XDOG价格走势</h3>
            </div>
          </template>
          <ChartContainer :options="xdogChartOptions" height="400px" />
        </el-card>
      </el-col>

      <el-col :span="24" :xs="24" :sm="24" :md="12">
        <el-card v-loading="loading.charts">
          <template #header>
            <div class="chart-header">
              <h3>OKX价格走势</h3>
            </div>
          </template>
          <ChartContainer :options="okxChartOptions" height="400px" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 社区数据 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :span="24" :xs="24" :sm="24" :md="12">
        <el-card v-loading="loading.charts">
          <template #header>
            <div class="chart-header">
              <h3>Telegram社区增长</h3>
            </div>
          </template>
          <ChartContainer :options="telegramChartOptions" height="300px" />
        </el-card>
      </el-col>

      <el-col :span="24" :xs="24" :sm="24" :md="12">
        <el-card v-loading="loading.charts">
          <template #header>
            <div class="chart-header">
              <h3>Twitter讨论热度</h3>
            </div>
          </template>
          <ChartContainer :options="twitterChartOptions" height="300px" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 社区基金地址 -->
    <el-row :gutter="20" class="mt-4">
      <el-col :span="24">
        <el-card class="fund-address-card">
          <template #header>
            <div class="card-header">
              <div class="card-header-content">
                <el-icon><Wallet /></el-icon>
                <span>社区基金地址</span>
              </div>
            </div>
          </template>
          <div class="fund-address-content">
            <div class="address-info">
              <div class="address-label">基金地址:</div>
              <div class="address-value">0xb59acba5a6a306658f92b59313e684186b2a403d</div>
              <el-button type="primary" link @click="copyAddress">
                <el-icon><CopyDocument /></el-icon>
                复制地址
              </el-button>
            </div>
            <el-row :gutter="20" class="mt-3">
              <el-col :span="8">
                <div class="fund-stat-item">
                  <div class="fund-stat-label">基金数量</div>
                  <div class="fund-stat-value">500,000 XDOG</div>
                  <div class="fund-stat-change positive">+2.5%</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="fund-stat-item">
                  <div class="fund-stat-label">24h变化</div>
                  <div class="fund-stat-value">+12,500 XDOG</div>
                  <div class="fund-stat-change positive">+2.5%</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="fund-stat-item">
                  <div class="fund-stat-label">更新时间</div>
                  <div class="fund-stat-value">2025-10-22 14:30</div>
                </div>
              </el-col>
            </el-row>

            <!-- 收支明细 -->
            <div class="fund-details">
              <div class="details-header" @click="toggleFundDetails">
                <span>收支明细</span>
                <el-icon :class="{ 'expanded': fundDetailsExpanded }">
                  <ArrowDown />
                </el-icon>
              </div>

              <div v-show="fundDetailsExpanded" class="details-content">
                <el-table :data="fundTransactions" style="width: 100%" size="small">
                  <el-table-column prop="date" label="日期" width="120" />
                  <el-table-column prop="type" label="类型" width="80">
                    <template #default="scope">
                      <el-tag :type="scope.row.type === '收入' ? 'success' : 'danger'">
                        {{ scope.row.type }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="amount" label="金额(XDOG)" width="120" align="right" />
                  <el-table-column prop="balance" label="余额(XDOG)" align="right" />
                  <el-table-column prop="description" label="说明" />
                </el-table>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 项目链接 -->
    <div class="project-links">
      <p>探索更多 XDOG 相关资源</p>
      <div class="project-links-container">
        <el-button type="primary" plain @click="goTarget('https://www.okx.com/')">
          <el-icon><Link /></el-icon>
          OKX官网
        </el-button>
        <el-button type="primary" plain @click="goTarget('https://twitter.com/XDogeChain')">
          <el-icon><Link /></el-icon>
          Twitter
        </el-button>
        <el-button type="primary" plain @click="goTarget('https://t.me/XDogeChain')">
          <el-icon><Link /></el-icon>
          Telegram
        </el-button>
        <el-button type="primary" plain @click="goTarget('https://explorer.xdoge.org/')">
          <el-icon><Link /></el-icon>
          区块浏览器
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import * as echarts from 'echarts'
import {
  Coin, Top, Bottom, TrendCharts,
  Wallet, User, Link, Right
} from '@element-plus/icons-vue'
import ChartContainer from '@/components/Xdog/ChartContainer.vue'
import { getTokenPriceInfo } from '@/api/web3/market'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const priceInfo = ref({
  chainIndex: '196',
  tokenContractAddress: '0x0cc24c51bf89c00c5affbfcf5e856c25ecbdb48e',
  time: '',
  currentPrice: '0.00000',
  marketCap: '0',
  change5M: '0',
  change1H: '0',
  change4H: '0',
  change24h: 0,
  volume5M: '0',
  volume1H: '0',
  volume4H: '0',
  volume24h: '0',
  txs5M: '0',
  txs1H: '0',
  txs4H: '0',
  txs24H: '0',
  high24h: '0',
  tradeNum: '0',
  low24h: '0',
  circSupply: '0',
  liquidity: '0',
  holders: '0'
})

const stats = ref({
  dailyVolume: '0',
  dailyVolumeChange: 0,
  addressCount: '0',
  addressCountChange: 0,
  twitterMentions: '0',
  twitterMentionsChange: 0,
  telegramMembers: '0',
  telegramMembersChange: 0,
  todayNewMembers: '0',
  todayNewMembersChange: 0,
  stabilityFundBalance: '0'
})

// 图表配置
const xdogChartOptions = computed(() => ({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#1a1a1a',
    borderColor: '#333333',
    textStyle: {
      color: '#ffffff'
    }
  },
  legend: {
    data: ['XDOG价格'],
    textStyle: {
      color: '#ffffff'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['10-16', '10-17', '10-18', '10-19', '10-20', '10-21', '10-22'],
    axisLine: {
      lineStyle: {
        color: '#333333'
      }
    },
    axisLabel: {
      color: '#cccccc'
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: '#333333'
      }
    },
    axisLabel: {
      color: '#cccccc'
    },
    splitLine: {
      lineStyle: {
        color: '#333333'
      }
    }
  },
  series: [
    {
      name: 'XDOG价格',
      type: 'line',
      smooth: true,
      data: [0.0102, 0.0105, 0.0108, 0.0112, 0.0110, 0.0109, 0.01094],
      itemStyle: {
        color: '#409eff'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(64, 158, 255, 0.5)' },
          { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
        ])
      }
    }
  ]
}))

const okxChartOptions = computed(() => ({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#1a1a1a',
    borderColor: '#333333',
    textStyle: {
      color: '#ffffff'
    }
  },
  legend: {
    data: ['OKB价格'],
    textStyle: {
      color: '#ffffff'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['10-16', '10-17', '10-18', '10-19', '10-20', '10-21', '10-22'],
    axisLine: {
      lineStyle: {
        color: '#333333'
      }
    },
    axisLabel: {
      color: '#cccccc'
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: '#333333'
      }
    },
    axisLabel: {
      color: '#cccccc'
    },
    splitLine: {
      lineStyle: {
        color: '#333333'
      }
    }
  },
  series: [
    {
      name: 'OKB价格',
      type: 'line',
      smooth: true,
      data: [52.1, 52.8, 53.2, 52.9, 53.5, 53.8, 54.2],
      itemStyle: {
        color: '#67c23a'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(103, 194, 58, 0.5)' },
          { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
        ])
      }
    }
  ]
}))

// 刷新数据
const refreshData = () => {
  // 调用后端API获取实时价格信息
  const requestData = [{
    chainIndex: '196', // 根据实际返回数据，使用正确的链标识
    tokenContractAddress: '0x0cc24c51bf89c00c5affbfcf5e856c25ecbdb48e' // XDOG合约地址
  }]

  getTokenPriceInfo(requestData).then(response => {
    if (response.code === 200 && response.data && response.data.data && response.data.data.length > 0) {
      const tokenData = response.data.data[0]

      // 更新所有价格相关信息
      priceInfo.value.chainIndex = tokenData.chainIndex || priceInfo.value.chainIndex
      priceInfo.value.tokenContractAddress = tokenData.tokenContractAddress || priceInfo.value.tokenContractAddress
      priceInfo.value.time = tokenData.time || priceInfo.value.time
      priceInfo.value.currentPrice = tokenData.price ? parseFloat(tokenData.price).toFixed(5) : priceInfo.value.currentPrice
      priceInfo.value.marketCap = tokenData.marketCap ? parseFloat(tokenData.marketCap).toFixed(2) : priceInfo.value.marketCap
      priceInfo.value.change5M = tokenData.priceChange5M || priceInfo.value.change5M
      priceInfo.value.change1H = tokenData.priceChange1H || priceInfo.value.change1H
      priceInfo.value.change4H = tokenData.priceChange4H || priceInfo.value.change4H
      priceInfo.value.change24h = tokenData.priceChange24H ? parseFloat(tokenData.priceChange24H) : priceInfo.value.change24h
      // 交易量格式化为整数
      priceInfo.value.volume5M = tokenData.volume5M ? Math.floor(parseFloat(tokenData.volume5M)).toString() : priceInfo.value.volume5M
      priceInfo.value.volume1H = tokenData.volume1H ? Math.floor(parseFloat(tokenData.volume1H)).toString() : priceInfo.value.volume1H
      priceInfo.value.volume4H = tokenData.volume4H ? Math.floor(parseFloat(tokenData.volume4H)).toString() : priceInfo.value.volume4H
      priceInfo.value.volume24h = tokenData.volume24H ? Math.floor(parseFloat(tokenData.volume24H)).toString() : priceInfo.value.volume24h
      // 交易笔数格式化为整数
      priceInfo.value.txs5M = tokenData.txs5M ? Math.floor(parseFloat(tokenData.txs5M)).toString() : priceInfo.value.txs5M
      priceInfo.value.txs1H = tokenData.txs1H ? Math.floor(parseFloat(tokenData.txs1H)).toString() : priceInfo.value.txs1H
      priceInfo.value.txs4H = tokenData.txs4H ? Math.floor(parseFloat(tokenData.txs4H)).toString() : priceInfo.value.txs4H
      priceInfo.value.txs24H = tokenData.txs24H ? Math.floor(parseFloat(tokenData.txs24H)).toString() : priceInfo.value.txs24H
      priceInfo.value.high24h = tokenData.maxPrice ? parseFloat(tokenData.maxPrice).toFixed(5) : priceInfo.value.high24h
      priceInfo.value.tradeNum = tokenData.tradeNum ? Math.floor(parseFloat(tokenData.tradeNum)).toString() : priceInfo.value.tradeNum
      priceInfo.value.low24h = tokenData.minPrice ? parseFloat(tokenData.minPrice).toFixed(5) : priceInfo.value.low24h
      // 流通量格式化为整数
      priceInfo.value.circSupply = tokenData.circSupply ? Math.floor(parseFloat(tokenData.circSupply)).toString() : priceInfo.value.circSupply
      priceInfo.value.liquidity = tokenData.liquidity ? Math.floor(parseFloat(tokenData.liquidity)).toString() : priceInfo.value.liquidity
      priceInfo.value.holders = tokenData.holders ? Math.floor(parseFloat(tokenData.holders)).toString() : priceInfo.value.holders
    }
  }).catch(error => {
    console.error('获取价格信息失败:', error)
  })
}

// 格式化数字，保留两位小数
const formatToTwoDecimals = (value) => {
  if (!value) return '0.00'
  const number = parseFloat(value)
  return isNaN(number) ? '0.00' : number.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

// 格式化代币数量，整数不显示小数点，有小数部分最多保留1位小数
const formatTokenAmount = (value) => {
  if (!value) return '0'
  const number = parseFloat(value)
  if (isNaN(number)) return '0'

  // 检查是否为整数
  if (Number.isInteger(number)) {
    return number.toLocaleString()
  } else {
    // 保留最多1位小数
    return number.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 1 })
  }
}

// 打开外部链接
const goTarget = (url: string) => {
  window.open(url, '_blank')
}

// 进入管理后台
const goToLogin = () => {
  router.push('/login')
}

onMounted(() => {
  refreshData()
})

</script>

<style scoped>
.home-container {
  background-color: #141414;
  min-height: 100vh;
  padding: 20px;
  color: #ffffff;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px 0;
  position: relative;
}

.page-title h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  background: linear-gradient(90deg, #409eff, #00f2fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-title p {
  font-size: 1.2rem;
  color: #cccccc;
}

/* 进入管理后台按钮样式 */
.admin-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

.admin-button .el-button {
  background-color: #409eff;
  border-color: #409eff;
  color: #ffffff;
  font-weight: 500;
  transition: all 0.3s ease;
}

.admin-button .el-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.data-section {
  margin-bottom: 40px;
}

.data-card {
  background: linear-gradient(145deg, #1e1e1e, #252525);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid #333333;
  transition: all 0.3s ease;
  height: 100%;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border-color: #409eff;
}

.data-card-icon {
  font-size: 2rem;
  margin-right: 15px;
  color: #409eff;
}

.data-card-content {
  flex: 1;
}

.data-card-label {
  font-size: 0.9rem;
  color: #aaaaaa;
  margin-bottom: 5px;
}

.data-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.data-card-change {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.data-card-change.positive {
  color: #67c23a;
}

.data-card-change:not(.positive) {
  color: #f56c6c;
}

.chart-section {
  margin-bottom: 40px;
}

.chart-card {
  background: linear-gradient(145deg, #1e1e1e, #252525);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid #333333;
  transition: all 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.chart-header h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 1.3rem;
}

.action-section {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(145deg, #1e1e1e, #252525);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid #333333;
}

.action-section h2 {
  margin-top: 0;
  margin-bottom: 30px;
  color: #ffffff;
  font-size: 1.8rem;
}

.action-buttons {
  margin-bottom: 30px;
}

.action-buttons .el-button {
  margin: 10px;
  background-color: transparent;
  border-color: #409eff;
  color: #409eff;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.action-buttons .el-button:hover {
  background-color: #409eff;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.login-link .el-button {
  font-size: 1.1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container {
    padding: 10px;
  }
  
  .page-header {
    padding: 20px 0;
  }
  
  .page-title h1 {
    font-size: 2rem;
  }
  
  .page-title p {
    font-size: 1rem;
  }
  
  .admin-button {
    position: static;
    margin-bottom: 20px;
  }
  
  .data-card {
    padding: 15px;
  }
  
  .data-card-icon {
    font-size: 1.5rem;
  }
  
  .data-card-value {
    font-size: 1.2rem;
  }
  
  .chart-card {
    padding: 15px;
  }
  
  .action-section {
    padding: 20px 10px;
  }
  
  .action-section h2 {
    font-size: 1.5rem;
  }
}
</style>
